<template>
  <div class="left-list">
    <div
      class="left-list-item"
      v-for="(item, index) in props.list"
      :key="index"
      :class="{ active: index === activeIndex }"
      @click="handleClick(item, index)"
    >
      <div class="left-list-item-icon">
        <SvgIcon
          class="iconDef"
          :name="(item as IListItem).icon"
          :color="activeIndex === index ? '#2590ff' : '#6b84a5'"
          width="16"
          height="16"
        />
      </div>
      <div class="left-list-item-title">{{ (item as IListItem).title }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue';
interface IListItem {
  icon: string;
  title: string;
  value: string;
}
const props = defineProps({
  list: {
    type: Array as PropType<IListItem[]>,
    required: true,
    default: () => [],
  },
});
const emits = defineEmits(['handleItem']);
const activeIndex = ref(0);

const handleClick = (item: IListItem, index: number) => {
  activeIndex.value = index;
  emits('handleItem', item);
};
</script>

<style lang="less" scoped>
.left-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid #e7eff8;
  padding: 20px 16px 0 0;
  color: #333;
}
.left-list-item {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.left-list-item:hover {
  background: rgba(37, 144, 255, 0.05);
}
.left-list-item-icon {
  margin-right: 8px;
  display: flex;
  height: 100%;
  align-items: center;
}
.left-list-item-title {
  display: flex;
  height: 100%;
  align-items: center;
  font-size: 14px;
}
.iconDef {
  fill: #2590ff;
}
.active {
  background: rgba(37, 144, 255, 0.05);
  color: #2590ff !important;
}
</style>
